<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <script src="./axios.js"></script>
  <script src="./vue.js"></script>
  <script src="./index.js"></script>
  <div id="app" style="margin-top: 100px; display: none">

    <div style="width: 1000px; margin: 0 auto;">
      <h2 style="text-align: center">YApi 平台部署</h2>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="部署版本" prop="version">
            <el-select v-model="ruleForm.version" placeholder="请选择">
                <el-option
                  v-for="item in ruleForm.versions"
                  :key="item.version"
                  :label="item.version"
                  :value="item.version">
                </el-option>
              </el-select>
        </el-form-item>
        <el-form-item label="公司名称" prop="company">
          <el-input v-model="ruleForm.company"></el-input>
        </el-form-item>
        <el-form-item label="部署路径" prop="root">
            <el-input v-model="ruleForm.root"></el-input>
          </el-form-item>
        <el-form-item label="管理员邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>

        <el-form-item label="网站端口号" prop="port">
          <el-input v-model="ruleForm.port"></el-input>
        </el-form-item>

        <el-form-item label="数据库地址" prop="dbAddr">
          <el-input v-model="ruleForm.dbAddr"></el-input>
        </el-form-item>

        <el-form-item label="数据库端口" prop="dbPort">
          <el-input v-model="ruleForm.dbPort"></el-input>
        </el-form-item>

        <el-form-item label="数据库名" prop="dbName">
          <el-input v-model="ruleForm.dbName"></el-input>
        </el-form-item>

        <el-form-item label="数据库认证" prop="enableDbAuth">
          <el-switch on-text="" off-text v-model="ruleForm.enableDbAuth"></el-switch>
        </el-form-item>

        <el-form-item v-show="ruleForm.enableDbAuth" label="数据库用户名" prop="dbUser">
          <el-input v-model="ruleForm.dbUser"></el-input>
        </el-form-item>
        <el-form-item v-show="ruleForm.enableDbAuth" label="数据库密码" prop="dbPass">
          <el-input v-model="ruleForm.dbPass"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">开始部署</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog style="min-height: 500px;" title="部署日志" :visible.sync="dialogVisible" >
      <div style="min-height: 500px;" >
        <div v-for="item in dialogResult" >{{item}}</div>
        <div style="height: 50px;" v-loading="loading" element-loading-text="正在部署，请稍后...">

        </div>
    </span>
      </div>
    </el-dialog>

  </div>
  <script>
    var Ctor, websocket, model;
    axios.get('/api/base').then(function (res) {
      document.getElementById('app').style.display = 'block';
      res.data.versions = res.data.versions.map(function(item){
        return {
          version: item
        };
      })

      var Main = {
        data: function () {
          return {
            dialogVisible: false,
            loading: true,
            dialogResult: [],
            ruleForm: {
              version:res.data.versions[0].version,
              root: res.data.root,
              versions: res.data.versions,
              email: 'admin@admin.com',
              port: '3000',
              dbAddr: '127.0.0.1',
              dbPort: '27017',
              dbName: 'yapi',
              dbUser: '',
              dbPass: '',
              enableDbAuth: false
            },
            rules: {
              company: {
                required: true
              },
              version:{
                required: true
              },
              root: [
                { required: true, message: '请输入部署路径' }
              ],
              email: [
                { required: true, message: '请输入管理员邮箱' }
              ],
              port: [
                { required: true, message: '请输入服务器端口号' }
              ],
              dbAddr: [
                { required: true, message: '请输入数据库地址' }
              ],
              dbPort: [
                { required: true, message: '请输入数据库端口号' }
              ],
              dbName: [
                { required: true, message: '请输入数据库名称' }
              ]
            }
          }
        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.dialogVisible = true;
                var m = model.ruleForm;
                model.dialogResult.splice(0);
                var that = this;                
                var params = Object.assign({}, m);
                if (params.dbUser == '' && params.dbPass == '') {
                  delete params.dbUser;
                  delete params.dbPass;
                }
                that.loading = true;
                websocket.send(JSON.stringify(params));
              } else {
                return false;
              }
            });
          }
        }
      }
      Ctor = Vue.extend(Main)
      model = new Ctor().$mount('#app')
      var domain = location.hostname + (location.port !== "" ? ":" + location.port : "");
      websocket = new WebSocket('ws://' + domain + '/api/install');      
      websocket.onopen = function(){
        console.log('websocket connect success...');
      }
      websocket.onmessage = function(res){
        if(res.data === '---end---'){
          model.loading = false;
        }else{
          model.dialogResult.push(res.data);
        }
        
        
      }
      websocket.onerror = function(){
        console.error('websocket connect failed.')
      }
    })
  </script>
</body>

</html>